<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layouts/layout">
<head>
<title>ProductList</title>
</head>
<body>

	<th:block layout:fragment="content">

		<div class="container-wrapper">
			<div class="container">
				<div class="page-header">
					<h1>All Products</h1>

					<p class="lead">Checkout all the awesome products available	now!</p>
				</div>

				<table class="table-striped table-hover" id="data_table"  >
					<thead>
						<tr class="bg-success">
							
							<th>Product Name</th>
							<th>Category</th>
							<th>Condition</th>
							<th>Price</th>
							<th></th>
						</tr>
					</thead>

					<tr th:each="prod : ${products}" >
						
						<td th:text="${prod.productName}"></td>
						<td th:text="${prod.productcategory}"></td>
						<td th:text="${prod.productcondition}"></td>
						<td th:text="${prod.productprice}"></td>
						<td><a
							th:href="@{|/product/viewProduct/${prod.id}|}"><span
								class="glyphicon glyphicon-info-sign"></span></a></td>
					</tr>

				</table>

			</div>
		</div>
	</th:block>


	<th:block layout:fragment="javascripts">
	
		<!-- Page Model Data -->
            <script th:inline="javascript">
            /*<![CDATA[*/
            	$(document).ready(function(){
            	
            	
            		var searchCondition = /*[[${searchCondition}]]*/ 'searchCondition';
	                $('#data_table').DataTable({
            	 		"lengthMenu": [[1,2,3,5,10, -1], [1,2,3,5,10, "All"]],
            	 		"oSearch" : {"sSearch": searchCondition}
       				 });
                });
                
            /*]]>*/
            </script>

	</th:block>
</body>
</html>